<template>
  <!--区间输入-->
  <div class="input-text-box">
    <div class="input-text-title">
      <p v-text="title"></p>
    </div>
    <div class="input-text">
      <input type="text"
             :disabled="readOnly"
             @input="inputChange"
             v-model="val1"
             autocomplete="off"
             :placeholder="placeholderF">
      <span class="intervalTag" v-text="linkSymbol"></span>
      <input type="text"
             :disabled="readOnly"
             v-model="val2"
             @input="inputChange"
             autocomplete="off"
             :placeholder="placeholderL">
    </div>
  </div>

</template>
<script>
    export default {
        props:{
            value:{
                type: Object
            },
            title:{
                type: String,
                default: () => "区间值"
            },
            placeholderF:{
                type: String,
                default: () => null
            },
            placeholderL:{
                type: String,
                default: () => null
            },
            linkSymbol:{
                type: String,
                default: () => "~"
            },
            readOnly:{
                type: Boolean,
                default: () => false
            },
        },
        data() {
            return {
                val1: null,
                val2: null,
            }
        },
        mounted() {
            this.initValue()
        },
        methods: {
            initValue() {
                this.val1 = this.value.split(this.linkSymbol)[0]
                this.val2 = this.value.split(this.linkSymbol)[1]
            },
            inputChange() {
                this.$emit("input", this.val1+this.linkSymbol+this.val2);
            }
        }
    }
</script>

<style scoped>
  input, input:focus {
    background: none;
    outline: none;
    border: none;
  }
  .input-text-box {
    width: 100%;
    height: 30px;
    margin: 15px auto;
  }
  .input-text-title {
    cursor: default;
    float: left;
    width: 20%;
    height: 100%;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  .input-text-title p {
    width: 100%;
    margin: 0 0;
    text-align: center;
    color: rgba(255, 255, 255,0.5);
  }
  .input-text {
    float: left;
    width: 80%;
  }
  .input-text input {
    cursor: default;
    border: 1px solid #2b313e;
    border-radius: 3px;
    width: calc(40%);
    height: 25px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255,0.5);
    background-color: #222833; /*背景颜色*/
    transition: 0.3s;
  }
  .input-text input:focus {
    border: 1px solid #39404d;
  }
  .input-text input::placeholder {
    color: rgba(255, 255, 255,0.2);
    font-weight: lighter;
  }
  .intervalTag{
    display: inline-block;
    min-width: 20px;
    height: 25px;
    padding-left: 3px;
    padding-right: 3px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
  }
</style>
